重要說明-這是我個人了解之後白話文的解說

我們都知道Vue方便，那請問Vue方便在什麼地方？
接下來假設我們要建立一個按鈕，按鈕按下去之後按鈕數字會增加。
同樣的東西代碼有什麼區別。

傳統的HTML和JS

html建立一個button連接js

js在設定監聽並設定function

Vue.js

html的建立

• v-on:click="incrementCount": 這是Vue的事件綁定語法。當按鈕被點擊時，它將調用incrementCount方法。
• {{ count }}: 這是Vue的模板語法。它會顯示count變數的值，當count的值改變時，界面上的值也會自動更新。

js的設定

• el: '#app': 指定Vue實例掛載的元素。在這裡，我們告訴Vue要控制的DOM元素是具有ID app 的元素。
• data: 包含此Vue實例的數據。在這裡，我們只有一個名為count的數據。
• methods: 定義可以在模板中使用的方法。在這裡，我們定義了一個incrementCount方法，當按鈕被點擊時，該方法會被調用。
• this.count++: 在incrementCount方法中，我們使用this來訪問Vue實例的數據，然後增加count的值。由於Vue是反應式的，當count的值改變時，界面上的{{ count }}也會立即更新。

以上都是用ChatGPT協助說明的，接下來我們實際操作

第一步-打開昨天的目錄輸入npm create vue@latest,全部選NO名字自己取

第二步-用visual studio code打開你的文件

題外話，我的material icon那麼好看是有安裝這個外掛

第三步-到你的src-App.vue

全部刪除換成上面的代碼

第四步-cmd執行

輸入cd到目標專案，npm install , npm run dev 就會顯示你的執行位置了

第五步-看看自己的按鈕是否運作正常

雖然有點小，不過按鈕運作正常

總結重點

可能有些人做到了，可是還是一頭霧水，這邊我用最簡單的說法說明

在HTML插入id做記號（方便之後插入template）

HTML連接著main.js

第一行就和普通一樣載入css
第二行就是從vue載入createApp的功能
第三行就是我們的重點App.vue（製作好的模板）
第五行就是把我們做好的模板放到之前做記號的地方

模板製作過程

被template包裹的就是我們的模板
橙色代表function 黃色代表變數
我們要在script設定我們的data和function所以初始化我們的count和設定function邏輯

我的心得

做標記-弄模板-放回去
複雜的事情簡單想，vue看上去很複雜其實基礎核心觀念很簡單
做標記：在HTML中設定一個掛載點，通常是一個具有特定ID（如app）的元素。
弄模板：在Vue組件中定義模板和相關的邏輯。這包括template和script部分。
放回去：通過主腳本（如main.js）將Vue應用實例掛載到HTML中的特定元素上。

複雜的後面才會教你們，讓我們接下來30天內體會由簡入難-由難入簡吧！